<template>
    <!-- <div style=" height: 300px;">
        <el-carousel :interval="3000" arrow="always" class="sweperSty" v-if="(swiperList[0] != null)">
            <el-carousel-item class="sewperItem" v-for="(item, index) in swiperList" :key="index">
                <img :src="item.drawingUrl" class="simgSty">
            </el-carousel-item>
        </el-carousel>
    </div> -->
    <div style=" height: 300px;">
        <el-carousel :interval="3000" arrow="always" class="sweperSty" v-if="(swiperList[0] != null)">
            <el-carousel-item class="sewperItem" v-for="(item, index) in swiperList" :key="index">
                <img :src="item.drawingUrl" class="simgSty">
            </el-carousel-item>
        </el-carousel>
    </div>

    <div class="searchBox">
        <!-- <div class="search flex_str">
            <el-input class="iptSty" placeholder="请输入关键词搜索" v-model="searchParams.keyword"
                @keyup.enter.native="getHouseList"></el-input>
            <div class="rebBgSty flex_cen">
                <img src="@/assets/img/search.png" class="search_img" @click="getHouseList">
            </div>
        </div> -->

        <div class="search  flex_str">
            <div class="searchBg flex_str">
                <div class="flex_cen locationSty">
                    <el-cascader v-model="city" :options="options" :props="props" @change="handleChange" placeholder="定位"
                        :show-all-levels="false" />
                </div>
                <el-input placeholder="请输入关键词搜索" class="iptSty" v-model="searchParams.keyword"
                    @keyup.enter.native="getHouseList" @change="iptChange"></el-input>
            </div>
            <div class="search_icon_bg flex_cen" @click="getHouseList">
                <img src="@/assets/img/search.png" class="searchSty" />
            </div>
        </div>
    </div>



    <div class="main_box flex_str_clo">
        <div class="main_left ">
            <div class="left_tab flex_str">
                <div>面积:</div>
                <div v-for="(item, index) in  leftTabList" :key="index" @click="left_tab_click(item)"
                    :class="item.id == left_tab_id ? 'left_tab_addSty' : ''">{{ item.name }}
                </div>
            </div>
            <div class="left_content">
                <div class="left_item flex_cen" v-for="(item, index) in houseList" :key="index" @click="goDetail(item.id)">
                    <img :src="item.firstImage ? item.firstImage : imgSrc" class="left_img_sty" @mouseenter="imgHover"
                        @mouseout="imgMouseOut">

                    <div class="left_txt_sty">
                        <div class="houseNameSty" :title="item.communityName">小区： {{ item.communityName }}</div>
                        <div class="houseNameSty" :title="item.buildingNo">楼栋号: {{ item.buildingNo }}</div>
                        <div class="houseNameSty" :title="item.recordName">备案: {{ item.recordName }}</div>

                        <div>建筑面积： {{ item.constructionArea }}㎡</div>
                        <div class="addressSty" :title="item.position">地址：{{ item.position }}</div>

                        <div>原始框架cad: {{ item.originalCadHave == 1 ? '有' : '无' }}</div>
                        <div>平面方案cad: {{ item.planeCadHave == 1 ? '有' : '无' }}</div>
                        <div>效果图: {{ item.effectPictureHave == 1 ? '有' : '无' }}</div>
                        <div>实景照片: {{ item.realScenePicturesHave == 1 ? '有' : '无' }}</div>
                    </div>
                </div>
                <div style="height: 50px;width: 100%;"></div>

                <div class="flex_cen" style="width: 100%;">
                    <el-config-provider :locale="locale">
                        <el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
                        :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="true"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getHouseList"
                        @current-change="getHouseList" />
                    </el-config-provider>
                   
                </div>
            </div>

        </div>
        <div class="main_right flex_cen_column">
            <div class="right_title">热门楼盘</div>
            <div class="right_item" v-for="(item, index) in hotHouseList" :key="index" @click="goDetail(item.id)">
                <img :src="item.firstImage" class="right_img_sty">
                <!-- <div class="test"></div> -->
                <div>
                    <div class="right_item_name" :title="item.communityName">
                        {{ item.communityName }}
                    </div>
                    <div style="margin:8px 0;" class="right_item_name" :title="item.position">{{ item.position }}</div>
                    <div class="flex_cen">
                        <img src="@/assets/img/see.png" class="right_icon_sty">
                        <div style="margin-right: 14px;">{{ item.browseNum || 0 }}</div>
                        <img src="@/assets/img/Collection.png" class="right_icon_sty">
                        <div>{{ item.favoriteNum || 0 }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <img :src="imgCurrentSrc" class="img_current_sty" ref="imgCurrent">
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import imgSrc from '@/assets/img/an1.png'
import { useRouter } from 'vue-router'
import { getSwiperApi, getHouseListApi, getHouseHottestRecommendApi } from '@/api/index/index'
import cityData from '@/utils/city.json'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn

const swiperList = ref<any>([])
const router = useRouter()
const imgCurrentSrc = ref('')
const leftItemList = reactive([
    {
        img: imgSrc,
        name: '绿都澜湾',
        address: '8号楼1102',
        mianji: '98㎡',
        qu: '河南省.郑州市.管城区',
        yuanCad: '有',
        pingCad: '有',
        xiaoguo: '有',
        shijing: '有'

    }, {
        img: imgSrc,
        name: '绿都澜湾',
        address: '8号楼1102',
        mianji: '98㎡',
        qu: '河南省.郑州市.管城区',
        yuanCad: '有',
        pingCad: '有',
        xiaoguo: '有',
        shijing: '有'

    }, {
        img: imgSrc,
        name: '绿都澜湾',
        address: '8号楼1102',
        mianji: '98㎡',
        qu: '河南省.郑州市.管城区',
        yuanCad: '有',
        pingCad: '有',
        xiaoguo: '有',
        shijing: '有'

    }, {
        img: imgSrc,
        name: '绿都澜湾',
        address: '8号楼1102',
        mianji: '98㎡',
        qu: '河南省.郑州市.管城区',
        yuanCad: '有',
        pingCad: '有',
        xiaoguo: '有',
        shijing: '有'

    }, {
        img: imgSrc,
        name: '绿都澜湾',
        address: '8号楼1102',
        mianji: '98㎡',
        qu: '河南省.郑州市.管城区',
        yuanCad: '有',
        pingCad: '有',
        xiaoguo: '有',
        shijing: '有'

    }, {
        img: imgSrc,
        name: '绿都澜湾',
        address: '8号楼1102',
        mianji: '98㎡',
        qu: '河南省.郑州市.管城区',
        yuanCad: '有',
        pingCad: '有',
        xiaoguo: '有',
        shijing: '有'

    }

])
const city = ref<any>('')
const cadName = ref<string>('')
const total = ref('')
const searchParams = reactive<any>({
    position: '',
    minArea: '',
    maxArea: '',
    keyword: '',
    current: 1,
    size: 10
})
const options = cityData
const props = {
    expandTrigger: 'hover',
    label: 'name',
    value: 'name',
    checkStrictly: true
}
const imgCurrent = ref<HTMLTableElement>();


const imgHover = (e: any) => {
    imgCurrentSrc.value = e.target.currentSrc
    // @ts-ignore
    imgCurrent.value.style.position = 'fixed'
    // @ts-ignore
    imgCurrent.value.style.top = `${e.clientY}px`
    // @ts-ignore
    imgCurrent.value.style.left = `${e.clientX + 100}px`
    // @ts-ignore
    imgCurrent.value.style.width = '340px'
}
const searchCode = ref<string>('')
const imgMouseOut = () => {
    imgCurrentSrc.value = ''
}
const left_tab_id = ref<number>(1)

const leftTabList = reactive([
    {
        id: 1,
        name: '不限',
        minArea: '',
        maxArea: ''
    }, {
        id: 2,
        name: '80㎡以下',
        minArea: '',
        maxArea: '80'
    }, {
        id: 3,
        name: '80-100㎡',
        minArea: '80',
        maxArea: '100'
    }, {
        id: 4,
        name: '100-120㎡',
        minArea: '100',
        maxArea: '120'
    }, {
        id: 5,
        name: '120-140㎡',
        minArea: '120',
        maxArea: '140'
    }, {
        id: 6,
        name: '140-180㎡',
        minArea: '140',
        maxArea: '180'
    }, {
        id: 7,
        name: '180-250㎡',
        minArea: '180',
        maxArea: '250'
    }, {
        id: 8,
        name: '250㎡及以上',
        minArea: '250',
        maxArea: ''
    }
])
const houseList = ref<any>([])
const hotHouseList = ref<any>([])
const left_tab_click = (e: any) => {
    left_tab_id.value = e.id;
    searchParams.minArea = e.minArea;
    searchParams.maxArea = e.maxArea;
    getHouseList()
}
const handleChange = (e: any) => {
    let str = ''
    e.map((v:any)=>{
        str += v
    })
    searchParams.position = str
}
const goDetail = (id: number | string) => {
    sessionStorage.setItem('roomKey', searchParams.keyword)
    router.push({ path: '/room/detail', query: { id: id } })
}
let neme = router.currentRoute.value.query.name
const getHouseList = () => {
    let roomKey = sessionStorage.getItem('roomKey')
    if (neme) {
        searchParams.keyword = neme;
    }
    if (roomKey) {
        searchParams.keyword = roomKey;
    }
    getHouseListApi(searchParams).then((res: any) => {
        houseList.value = res.data.records
        neme = ''
        total.value = res.data.total
        // router.push('/room/list')
    })
}
const iptChange = () => {
    sessionStorage.setItem('roomKey', '')
}
const getHouseHottestRecommend = () => {
    getHouseHottestRecommendApi().then((res: any) => {
        hotHouseList.value = res.data
    })
}
const getParams = () => {
    let position = router.currentRoute.value.query.position
    let communityName = router.currentRoute.value.query.communityName
    searchParams.position = position;
    city.value = position;
    searchParams.keyword = communityName;
    getHouseList()
}

onMounted(() => {
    getSwiperApi({ type: 2 }).then((res: any) => {
        swiperList.value = res.data
    })
    getHouseHottestRecommend()
    getParams()
})
</script>
<style scoped>
.right_item_name {
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}


.img_current_sty {
    width: 30vw !important;
}

:deep(.el-input__wrapper) {
    background: none;
    box-shadow: 0 0 0 0 #fff;
}

:deep(.is-active) {
    background-color: #FF9D07 !important;
}

:deep(.el-pagination__sizes) {
    display: none !important;
}

.addressSty {
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.houseNameSty {
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.test {
    width: 154px;
    height: 154px;
    background: #fff;
    transition: all 0.4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    background: url('@/assets/img/an2.png');
    background-repeat: no-repeat;
    /* 不会重复 */
    background-position: center;
    /* 是为了让图片放大的时候从中部放大，不会偏移 */
    background-size: 154px 154px;
    margin-right: 10px;
}

.test:hover {
    background-size: 130% 130%;
}

.right_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-bottom: 10px;
    margin-top: 10px;
    font-size: 18px;
    border-bottom: 1px solid #f0f0f0;
}

.right_icon_sty {
    width: 30px;
}

.right_img_sty {
    width: 154px;
    height: 100px;
    margin-right: 10px;
}

.left_item {
    box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, .3);
    margin: 16px 34px;
    border-radius: 10px;
    padding: 20px;
}

.left_img_sty {
    width: 260px;
    height: 173px;
    border-radius: 10px;
    margin-right: 10px;
}

.left_txt_sty {
    font-size: 16px;
    line-height: 24px;
}

.left_content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

.paginSty {
    position: absolute;
    bottom: 10px;
    right: 20px;
    width: 10%;
}

.left_tab {
    width: 100%;
    padding-bottom: 12px;
    margin-top: 12px;
    border-bottom: 1px solid #FF8D1C;
}

.left_tab_addSty {
    color: #FF8D1C;
}

.left_tab div {
    margin-right: 10px;
}

.main_box {
    width: 80%;
    margin-left: 10%;
    margin-top: 20px;
}

.main_left {
    width: 73%;
    min-height: 400px;
    background-color: #fff;
    padding: 20px;
}

.main_right {
    width: 22%;
    min-height: 600px;
    background-color: #fff;
    padding: 20px 10px;
}

.sewperItem {
    width: 100vw;
    height: 300px;
}


.iptSty {
    height: 56px;
    border: 0;
    width: 80%;
}

.iptSty:hover {
    border: 0;
}

.sweperSty {
    height: 300px;
}

.searchBox {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100vw;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.5);
}

.search {
    width: 60%;
    margin-left: 20%;
    margin-top: 120px;
    /* background-color: #fff; */
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
}


.searchBg {
    width: 90%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #fff;
}


.search_icon_bg {
    background: #FA9E42;
    height: 60px;
    width: 100px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.searchSty {
    width: 40px;
    height: 40px;
}

.locationSty {
    width: 150px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    align-items: center;
    border-right: 1px solid #F8F7F0;
}

.rebBgSty {
    width: 120px;
    height: 100%;
    background-color: #CB0018;
}

.search_img {
    width: 48px;
}

.simgSty {
    width: 100vw;
    height: 300px;
}
</style>